<template>
  <a-modal
    v-if="url"
    :visible="visible"
    :title="title"
    :footer="null"
    centered
    width="60%"
    @cancel="$emit('cancel')"
  >

    <div class="content-title">
      <span>{{ extraText }}</span>
      <a class="primary-link" :download="fileName" :href="url">下载表单</a>
    </div>

    <div class="pdf-container">
      <iframe :src="`/pdfjs/web/viewer.html?file=${url}`" style="width: 100%; height: 100%">
        您的浏览器不支持PDF阅读
      </iframe>
    </div>

  </a-modal>
</template>

<script>
export default {
  name: 'PDFModal',
  props: {
    url: {
      type: String,
      default: '',
      required: true
    },

    visible: {
      type: Boolean,
      default: false
    },

    title: {
      type: String,
      default: ''
    },

    extraText: {
      type: String,
      default: ''
    },

    fileName: {
      type: String,
      default: '表单'
    }
  },

  methods: {
    download () {
      const { url, fileName } = this
      if (!process.client || !url) return false

      const blob = new Blob([url], { type: 'application/pdf;charset=utf-8' })
      const linkNode = document.createElement('a')
      linkNode.download = `${fileName}.pdf` // a标签的download属性规定下载文件的名称
      linkNode.style.display = 'none'
      linkNode.href = window.URL.createObjectURL(blob) // 生成一个Blob URL
      document.body.appendChild(linkNode)
      linkNode.click() // 模拟在按钮上的一次鼠标单击
      window.URL.revokeObjectURL(linkNode.href) // 释放URL 对象
      document.body.removeChild(linkNode)
    }
  }
}
</script>

<style lang="less" scoped>

  .pdf-container {
    height: 65vh;
  }

  .content-title {
    .Flex;
    .Flex-justify-spacebetween;

    margin-bottom: 12px;
  }
</style>
